<template>
    <div style="text-align: left">
        <!--  :visible.sync="dialogFormVisible"    -->
        <el-button class="add-button" type="success" @click="dialogFormVisible = true">添加图书</el-button>
        <el-dialog
                title="添加/修改图书"
                v-model="dialogFormVisible"
                @close="clear">
            <el-form v-model="form" style="text-align: left" ref="dataForm">
                <el-form-item label="书名" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off" placeholder="不加《》"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth" prop="author">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版日期" :label-width="formLabelWidth" prop="date">
                    <el-input v-model="form.date" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth" prop="press">
                    <el-input v-model="form.press" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="封面" :label-width="formLabelWidth" prop="cover">
                    <el-input v-model="form.cover" autocomplete="off" placeholder="图片 URL"></el-input>
                    <img-upload @onUpload="uploadImg" ref="imgUpload"></img-upload>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth" prop="abs">
                    <el-input type="textarea" v-model="form.abs" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类" :label-width="formLabelWidth" prop="cid">
                    <el-select v-model="form.category.id" placeholder="请选择分类">
                        <el-option label="文学" value="1"></el-option>
                        <el-option label="流行" value="2"></el-option>
                        <el-option label="文化" value="3"></el-option>
                        <el-option label="生活" value="4"></el-option>
                        <el-option label="经管" value="5"></el-option>
                        <el-option label="科技" value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="id" style="height: 0">
                    <el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
<!--        slot="footer"     -->
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import ImgUpload from './ImgUpload'
    import {getCurrentInstance, reactive, toRefs} from "vue";

    export default {
        name: 'EditForm',
        components: {ImgUpload},
        setup() {
            const data = reactive({
                dialogFormVisible: false,
                form: {
                    id: '',
                    title: '',
                    author: '',
                    date: '',
                    press: '',
                    cover: '',
                    abs: '',
                    cid: '',
                    category: {
                        id: '',
                        name: ''
                    }
                },
                formLabelWidth: '120px'
            })
            let {proxy} = getCurrentInstance()

            function clear() {
                proxy.$refs.imgUpload.clear()
                data.form = {
                    id: '',
                    title: '',
                    author: '',
                    date: '',
                    press: '',
                    cover: '',
                    abs: '',
                    category: {
                        id: '',
                        name: ''
                    }
                }
            }

            function onSubmit() {
                proxy.$axios
                    .post('/admin/content/books', {
                        id: data.form.id,
                        cover: data.form.cover,
                        title: data.form.title,
                        author: data.form.author,
                        date: data.form.date,
                        press: data.form.press,
                        abs: data.form.abs,
                        category: data.form.category
                    }).then(resp => {
                    if (resp && resp.data.code === 200) {
                        data.dialogFormVisible = false
                        proxy.$emit('onSubmit')
                    }
                })
            }

            function uploadImg() {
                data.form.cover = proxy.$refs.imgUpload.url
            }

            return {
                ...toRefs(data),
                clear,
                uploadImg,
                onSubmit
            }
        }
    }
</script>

<style scoped>
    .add-button {
        margin: 18px 0 0 10px;
    }
</style>
